<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>智能办公系统 - 登录</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" th:href="@{/static/css/theme-chalk.css}" />
    <link rel="stylesheet" th:href="@{/static/css/login.css}" />

    <link rel="shortcut icon" th:href="@{/static/icon/favicon.ico}" />
    <link rel="bookmark"  th:href="@{/static/icon/favicon.ico}"  />

</head>
<body>
    <!-- 星空背景 -->
    <div class="stars"></div>

    <!-- 科技线条 -->
    <div class="tech-lines">
        <div class="tech-line" style="top: 20%"></div>
        <div class="tech-line" style="top: 40%"></div>
        <div class="tech-line" style="top: 60%"></div>
        <div class="tech-line" style="top: 80%"></div>
    </div>

    <!-- 行星群 -->
    <div class="planets">
        <div class="planet planet-1"></div>
        <div class="planet planet-2"></div>
        <div class="planet planet-3"></div>
        <div class="planet planet-4"></div>
        <!-- ... 添加更多行星 -->
    </div>

    <!-- 流星群 -->
    <div class="shooting-stars"></div>

    <div id="app">
        <div class="login-container">
            <div class="login-header">
                <h2 class="login-title">
                    <i class="el-icon-office-building"></i>
                        <p>智能办公系统</p>
                </h2>
                <p class="login-subtitle">INTELLIGENT OFFICE SYSTEM</p>
            </div>
            <el-form :model="loginForm" :rules="loginRules" ref="loginForm">
                <el-form-item prop="username">
                    <el-input
                            clearable
                        v-model="loginForm.username"
                        prefix-icon="el-icon-user"
                        placeholder="请输入用户名">
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                            clearable
                        v-model="loginForm.password"
                        prefix-icon="el-icon-lock"
                        type="password"
                        placeholder="请输入密码">
                    </el-input>
                </el-form-item>
                <el-form-item prop="captcha">
                    <div style="display: flex; gap: 10px;">
                        <el-input 
                            v-model="loginForm.captcha"
                            prefix-icon="el-icon-key"
                            placeholder="验证码"
                            style="width: 40%;"
                            clearable>
                        </el-input>
                        <div class="captcha-container" 
                            style="width: 60%;"
                            >
                            <img :src="codeImage" @click="refreshCaptcha" alt="验证码" class="captcha-img">
                        </div>
                    </div>
                </el-form-item>
                <div style="margin-bottom: 20px;">
                    <el-checkbox v-model="loginForm.remember">记住密码</el-checkbox>
                    <a href="#" class="forgot-password">忘记密码？</a>
                </div>
                <el-form-item>
                    <el-button type="primary" class="login-button" @click="handleLogin">登 录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>



    <!-- import Vue before Element -->
    <script th:src="@{/static/js/vuewz.js}"></script>

    <!-- import JavaScript -->
    <script th:src="@{/static/js/element-ui.js}"></script>
    <script th:src="@{/static/js/axios.js}"></script>
    <script th:src="@{/static/js/crypto.js}"></script>
    <script th:src="@{/static/js/kit/Kit.js}"></script>
    <script th:src="@{/static/js/const.js}"></script>



    <!-- 添加动态生成星星的脚本 -->
    <script>
        const stars = document.querySelector('.stars');
        document.addEventListener('DOMContentLoaded', async function () {
            // 生成20颗星星
            for (let i = 0; i < 20; i++) {
                kit.createStar(stars);
            }

            const planets = document.querySelector('.planets');
            // 动态创建20个行星
            for (let i = 0; i < 20; i++) {
                const planet = document.createElement('div');
                planet.className = 'planet';
                planets.appendChild(planet);
            }

            // 生成200条流星
            const shootingStars = document.querySelector('.shooting-stars');
            for (let i = 0; i < 20; i++) {
                kit.createShootingStar(shootingStars);
            }
        });

        // 添加星星闪烁动画
        const style = document.createElement('style');
        style.textContent = `
            @keyframes twinkle {
                0%, 100% { opacity: 1; }
                50% { opacity: 0.3; }
            }
        `;
        document.head.appendChild(style);

        // 定期刷新流星位置
        setInterval(() => {kit.refreshStar();}, 5000);
    </script>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    codeImage: '',
                    codeImageUrl: cst.gateway + cst.module.auth + '/anonymous/fetch_code',
                    formData: {
                        houseType: '住宅',
                        platform: 'PC'
                    },
                    loginForm: {
                        username: 'superAdmin',
                        password: '_12Mn34pQ56!',
                        captcha: '',
                        remember: true
                    },
                    loginRules: {
                        username: [
                            { required: true, message: '请输入用户名', trigger: 'blur' },
                            { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                        ],
                        password: [
                            { required: true, message: '请输入密码', trigger: 'blur' },
                            { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
                        ],
                        captcha: [
                            { required: true, message: '请输入验证码', trigger: 'blur' },
                            { min: 6, max: 6, message: '验证码长度为6位', trigger: 'blur' }
                        ]
                    }
                }
            },
            methods: {

                refreshCaptcha() {
                    this.codeImage = this.codeImageUrl + `?r=${Math.floor(Math.random() * 9000 + 1000)}`;
                },
                handleLogin() {
                    this.$refs.loginForm.validate((valid) => {
                        if (valid) {

                            console.log(this.loginForm, 'this.loginForm');

                            const params = {
                                username: kit.encData(this.loginForm.username),
                                password: kit.encData(this.loginForm.password),
                                captcha: kit.encData(this.loginForm.captcha)
                            };

                            console.log(params, 'params');
                            axios.post(cst.gateway + cst.module.auth + "/user/token/" + "login", params)
                                .then((response) => {
                                    console.log(response, 'response');
                                    if (response.data.code === 200) {
                                        this.$message.success('登录成功');
                                        console.log(response.data.data)
                                        window.location.href = 'index' + '?token=' + response.data.token;
                                    } else {
                                        this.$message.error(response.data.msg);
                                    }
                                })
                            //this.$message.success('登录成功');
                            //window.location.href = 'index';
                        } else {
                            return false;
                        }
                    });
                },

            },
            mounted() {
                this.refreshCaptcha();
                console.log(kit.encData('_12Mn34pQ56!'));
            }
        })
    </script>
</body>
</html> 